<template>
  <div class="settleStyle">
    <!--  -->

    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onColumnsChange="columns => this.columns = columns"
    >
    <template slot="controls" slot-scope="props">
      <el-button
        :loading="loading"
        type="primary"
        @click.native.prevent="addHandler"
      >新增</el-button>
    </template>
    </FilterTable>

    <el-dialog :visible.sync="visible" title="编辑" width="30%" left>
        <FormPanel ref="formList" :list="formList" labelWidth="120" :isSubmitBtn='false' formType="add" :cols="1" />
        <div class="clearfix" style="text-align: center;width: 22.2vw;font-size: 12px;margin: 10px auto;">
          <span style="float:left;color: red;">*</span>
          <p style="float:left;margin-right: 1vw;margin-left: 0.2vw;line-height: 19px;">结算方式使用</p>
          <el-checkbox-group style="float:left;" v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city.value" :key="city.value">{{city.text}}</el-checkbox>
          </el-checkbox-group>
          <el-checkbox-group style="float:left;    margin-left: 20px;" v-model="checkedCities2" @change="handleCheckedCitiesChange2">
            <el-checkbox v-for="city in cities2" :label="city.value" :key="city.value">{{city.text}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <FormPanel ref="formList2" :list="formList2" labelWidth="120" :isSubmitBtn='false' formType="add" :cols="1" />
        <div style="text-align: center;margin-top:20px;">
          <el-button
            type="primary"
            @click.native.prevent="closeHandler"
          >取消</el-button>
          <el-button
            :loading="loading"
            type="primary"
            @click.native.prevent="saveHandler"
          >保存</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { putGatheringType,gatheringType,postGatheringType } from '@/api/common/settleStyle/index.js';
import { dictionary } from '@/utils/dictMixin';
import { mapActions, mapState } from 'vuex';
import { systemCode } from '@/utils/validate';

export default {
  name: 'settleStyle',
  mixins: [dictionary],
  computed: {
    ...mapState('app', ['btnLoading']),
    loginBtnState() {
      return this.btnLoading[types.LOGIN];
    }
  },
  data() {
    return {
      checkedCities: [],
      checkedCities2: [],
      cities: [{value: 10041001, text: '收款'}],
      cities2: [{value: 10041001, text: '付款'},],
      formList: this.createFormList(),
      formList2: this.createFormList2(),
      fetchParams: {},
      visible: false,
      dialogTitle: '',
      fetchApi: gatheringType,
      columns: this.createTableColumns(),
      handleType: '',
      dataType:'',
      loading: false,
      rows:'',
      saveType:'edit',
      payTypePay:'',
      payTypeReceive:"",
    };
  },
  methods: {
    // init(){
    //   gatheringType(this.fetchParams).then(res=>{
    //     res.data.forEach((x,k)=>{
    //         this.topFilterList[2].itemList=this.topFilterList[2].itemList.concat([{ text: x.templateName, value: x.templateCode }])
    //     })
    //   })
    // },
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '结算方式代码',
          fieldName: 'gatheringCode',
          placeholder: '请输入',
          initialValue: '',
          style: { width: '200px' },
          disabled:true,
          rules: [{ required: true, trigger: 'blur', validator: systemCode }, { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '结算方式名称',
          fieldName: 'gatheringName',
          placeholder: '请输入',
          initialValue: '',
          style: { width: '200px' },
          rules: [{ required: true, message: '请输入', trigger: 'blur' }, { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }]
        },
        /* {
          type: 'MULTIPLE_CHECKBOX',
          label: '结算方式使用',
          fieldName: 'isReceive|isPay',
          placeholder: '请选择',
          selfCols: 2,
          initialValue: [,],
          itemList: [
            {value: 10041001, text: '收款'},
            {value: 10041003, text: '付款'},
          ],
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        }, */
        /* {
          type: 'SELECT',
          label: '是否有效',
          fieldName: 'validStatus',
          hidden:false,
          placeholder: '所属分类',
          itemList: this.createDictList('1001'),
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        }, */
      ]
    },
    createFormList2() {
      return [
        {
          type: 'SELECT',
          label: '是否有效',
          fieldName: 'validStatus',
          hidden:false,
          placeholder: '所属分类',
          style: { width: '200px' },
          itemList: this.createDictList('1001'),
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
      ]
    },
    
    createTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 60,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.editHandle(props.row)}>
                  编辑
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '结算方式代码',
          dataIndex: 'gatheringCode',
          sorter: true,
          width:200,
          //filter: true,
          filterType: 'input'
        },
        {
          title: '结算方式名称',
          dataIndex: 'gatheringName',
          sorter: true,
          //filter: true,
          width:200,
          filterType: 'input'
        },
        {
          title: '收款',
          dataIndex: 'isReceive',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1004'),
          render: props => {
            return <span>{this.createDictText(props.row.isReceive, '1004')}</span>;
          }
        },
        {
          title: '付款',
          dataIndex: 'isPay',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1004'),
          render: props => {
            return <span>{this.createDictText(props.row.isPay, '1004')}</span>;
          }
        },
        {
          title: '是否有效',
          dataIndex: 'validStatus',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1001'),
          render: props => {
            return <span>{this.createDictText(props.row.validStatus, '1001')}</span>;
          }
        },
        // {
        //   title: '数据来源',
        //   dataIndex: 'dataType',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('1046'),
        //   render: props => {
        //     return <span>{this.createDictText(props.row.dataType, '1046')}</span>;
        //   }
        // },
        // {
        //   title: '收款是否自动核销',
        //   dataIndex: 'writeoffTag',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('1004'),
        //   render: props => {
        //     return <span>{this.createDictText(props.row.writeoffTag?props.row.writeoffTag:10041002, '1004')}</span>;
        //   }
        // },
      ];
    },
    getCookie(){
        let allCookie=document.cookie.split(';')
        allCookie.forEach(x=>{
            if(x.indexOf('dataType') > -1 ){
              this.dataType=x.split('=')[1]
            }
        })
        //判断是否为厂端
        // if(this.dataType != 10461001){
        //   this.columns[4].hidden=true
        // }else{
        //   this.columns[4].hidden=false
        // }
        
    },
    handleCheckedCitiesChange(val){
      this.payTypeReceive=_.uniq(val)
      console.log(this.payTypeReceive,"val")

    },
    handleCheckedCitiesChange2(val){
      this.payTypePay=_.uniq(val)
      console.log(this.payTypePay,"val")

    },
    //新增
    addHandler(){
      this.checkedCities=[]
      this.checkedCities2=[]
      this.visible=true
      this.saveType='add'
      this.formList.forEach(x=>[
        x.initialValue = ''
      ])
      this.formList.find(item => item.fieldName === 'gatheringCode').disabled =false
      this.formList2.find(item => item.fieldName === 'validStatus').hidden=true
    },
    //编辑
    editHandle(row) {
      this.checkedCities=[]
      this.checkedCities2=[]
      this.payTypePay=[],
      this.payTypeReceive=[],
      this.payTypePay.push(row["isPay"]),
      this.payTypeReceive.push(row["isReceive"]),
      console.log(row,"row")
      this.visible=true
      this.saveType='edit'
      this.formList.forEach(x=>[
        x.initialValue = row[x.fieldName]
      ])
      this.formList.find(item => item.fieldName === 'gatheringCode').disabled =true
      this.formList2.find(item => item.fieldName === 'validStatus').hidden=false
      this.formList2.find(item => item.fieldName === 'validStatus').initialValue = row['validStatus']
      // let payType=[row["isReceive"],row["isPay"]]
      this.rows=row
      if(row.isPay){
        this.checkedCities2.push(row.isPay)
      }
      if(row.isReceive){
        this.checkedCities.push(row.isReceive)
      }
      // this.formList.find(item => item.fieldName === 'isReceive|isPay').initialValue =payType
      console.log(this.formList,"this.formList")
    },
    //
    saveHandler(){
      let data= this.$refs.formList.SUBMIT_FORM()
      console.log(data,"data",this.payTypeReceive,this.checkedCities2,this.checkedCities)
      let params={
        // ...data,
        validStatus:this.formList2.find(x=>x.fieldName == 'validStatus').initialValue,
        gatheringCode:data.gatheringCode,
        gatheringName:data.gatheringName,
        isPay:this.payTypePay?this.payTypePay[0]:"",
        isReceive:this.payTypeReceive?this.payTypeReceive[0]:"",
        companyId:this.rows.companyId?this.rows.companyId:""
      }
      // console.log(this.payData,"this.payData")
      /* if(this.payData.length > 0){
        this.payData.forEach(x=>{
          if(x == 10041001){
            params.isReceive = x
          }else if(x == 10041003){
            params.isPay = x
          }else{
            params.isPay=""
            params.isReceive=""
          }
        })
      }else{
          params.isPay=this.rows.isPay
          params.isReceive=this.rows.isReceive
      } */
      
      
      let istrue=false
      if(params.validStatus && params.gatheringCode && params.gatheringName && params.isPay ||params.isReceive){
        istrue=true
      }
      console.log(params,"params",istrue)
      if(istrue){
          if(this.saveType == 'add'){
            postGatheringType(params).then(res=>{
                console.log(res,"res")
                if(res.resultCode == 200){
                  this.$message({
                    showClose: true,
                    message: '保存成功',
                    type: 'success'
                  });
                  this.closeHandler('refresh')
                }
            })
          }else{
            putGatheringType(params,this.rows.gatheringId).then(res=>{
              console.log(res,"res")
                if(res.resultCode == 200){
                  this.$message({
                    showClose: true,
                    message: '保存成功',
                    type: 'success'
                  });
                  this.closeHandler('refresh')
                }
            })
          }
      }
    },
   
    closeHandler(type) {
      this.visible = false;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    }
  },
   
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.getCookie()
    // this.init()
  },
  created() {
  }
};
</script>

<style lang="less" >
// .noticeRight{
//   position: fixed;
//   top:10px;
//   right: 0;
//   z-index: 99;
//   width: 22.5%;
// }
// .noticeGroup{
//     padding: 14px 26px 14px 13px;
//     border-radius: 8px;
//     box-sizing: border-box;
//     border: 1px solid #ebeef5;
//     background-color: #fff;
//     box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
//     transition: opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;
//     overflow: hidden;
//     .noticeGrouptitle{
//       font-weight: 900;
//     }
//     .noticeGroupcontent{
//       padding: 10px 0;
//     }

//     .btn{
//         border: 1px solid #1682e6;
//         background: #1682e6;
//         color: #fff;
//         font-size: 16px;
//         width: 22%;
//         text-align: center;
//         height: 24px;
//         line-height: 24px;
//         border-radius: 5px;
//         position: relative;
//         left: 81%;
//         cursor: pointer;
//     }
// }
.settleStyle{
  .btn{
        border: 1px solid #1682e6;
        background: #1682e6;
        color: #fff;
        font-size: 14px;
        width: 23%;
        text-align: center;
        height: 24px;
        line-height: 24px;
        border-radius: 5px;
        // position: relative;
        // left: 274%;
        float: right;
        cursor: pointer;
    }
}
 
</style>
